<template>
	<view class="container">
		<view class="qrimg">
			<view class="qrimg-i">
				<tki-qrcode :style="{'backgroundColor':buttonColor}"
					v-if="ifShow"
					cid="qrcode1"
					ref="qrcode"
					:val="val"
					:size="size"
					:unit="unit"
					:background="background"
					:foreground="foreground"
					:pdground="pdground"
					:icon="icon"
					:iconSize="iconsize"
					:lv="lv"
					:onval="onval"
					:loadMake="loadMake"
					:usingComponents="true"
					@result="qrR"
				/>
			</view>
			<!-- <view class="qrimg-i">
				<tki-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
			</view> -->
		</view>
		<view class="uni-padding-wrap">
			<view class="uni-title">二维码内容：</view>
		</view>
		<view class="uni-list">
			<input class="uni-input" placeholder="请输入..." v-model="val" @blur="handleInputChange"/>
		</view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="uni-title">二维码大小:</view>
		</view>
		<view class="body-view">
			<slider :value="size" @change="sliderchange" min="50" max="500" show-value />
		</view>
		<view class="picker">
			<!-- 颜色选择插件-修改背景色 -->
			<view>
				<view>
					<view class="picker-title">背景色</view>
				</view>
				<view>
					<button class="button-picker" :style="{'backgroundColor':background}" @tap="showPickerColorPopBack"></button>
					<picker-color :isShow="showPickerColorBack" :bottom="bottomPickerColor"  @callback='getPickerColorBack' />
				</view>
			</view>
			<!-- 颜色选择插件-修改前景色 -->
			<view>
				<view>
					<view class="picker-title">前景色</view>
				</view>
				<view>
					<button class="button-picker" :style="{'backgroundColor':foreground}" @tap="showPickerColorPopFore"></button>
					<picker-color :isShow="showPickerColorFore" :bottom="bottomPickerColor"  @callback='getPickerColorFore' />
				</view>
			</view>
			
			<!-- 颜色选择插件-修改脚标色 -->
			<view>
				<view>
					<view class="picker-title">脚标色</view>
				</view>
				<view>
					<button class="button-picker" :style="{'backgroundColor':pdground}" @tap="showPickerColorPopPd"></button>
					<picker-color :isShow="showPickerColorPd" :bottom="bottomPickerColor"  @callback='getPickerColorPd' />
				</view>
			</view>
		</view>
		
		<view class="uni-padding-wrap">
			<view class="btns">
				<button class="button-color" type="" @tap="selectIcon">选择中心图标</button>
				<button class="" type="primary" @tap="creatQrcode">生成二维码</button>
				<button class="" type="primary" @tap="saveQrcode">保存到相册</button>
				<button type="warn" @tap="clearQrcode">清除二维码</button>
				<button type="warn" @tap="ifQrcode">显示隐藏二维码</button>
			</view>
		</view>
	</view>
</template>
<script>
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue';
import pickerColor from '@/components/helang-pickerColor/helang-pickerColor.vue';
export default {
	components: {
	    "picker-color":pickerColor,
		defultText:
			'<h3>使用必看：</h3> <p>1、将文案粘贴在上面的文本框中，点击一键优化文案，转换成功后会自动复制，回到微信朋友圈长按粘贴，发布成功之后下拉刷新朋友圈，如果显示异常可以尝试重新转换。</p><p>2、转换一次只可粘贴发表一次;多次粘贴发表需要进行多次转换，否则仍有被折叠的风险。</p><p>3、含有较多的表情符号、空格回车等非中文字时可能会转换失败，建议重新修改文案。</p> ',
		tkiQrcode
	},
	data() {
		return {
			ifShow: true,
			val: ' ', // 要生成的二维码值
			size: 400, // 二维码大小
			unit: 'upx', // 单位
			background: '#000000', // 背景色
			//background: '#fff', // 背景色
			foreground: '#ffffff', // 前景色
			pdground: '#ff0000', // 角标色
			icon: '', // 二维码图标
			iconsize: 40, // 二维码图标大小
			lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
			onval: false, // val值变化时自动重新生成二维码
			loadMake: true, // 组件加载完成后自动生成二维码
			src: '', // 二维码生成后的图片地址或base64

			showPickerColorBack: false,
			showPickerColorFore: false,
			showPickerColorPd: false,
			bottomPickerColor: 0
		};
	},
	created() {
		//设置分享到微信分享到朋友圈
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
	},
	methods: {
		sliderchange(e) {
			this.size = e.detail.value;
		},
		creatQrcode() {
			this.$refs.qrcode._makeCode();
		},
		saveQrcode() {
			this.$refs.qrcode._saveCode();
		},
		qrR(res) {
			this.src = res;
		},
		clearQrcode() {
			this.$refs.qrcode._clearCode();
			this.val = '';
		},
		ifQrcode() {
			this.ifShow = !this.ifShow;
		},
		selectIcon() {
			let that = this;
			uni.chooseImage({
				count: 1, //默认9
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: function (res) {
					that.icon = res.tempFilePaths[0];
					setTimeout(() => {
						that.creatQrcode();
					}, 100);
					// console.log(res.tempFilePaths);
				}
			});
		},
		/* 显示获取颜色选择弹窗 */
		showPickerColorPopBack() {
			this.showPickerColorBack = true;
		},
		/* 显示获取颜色选择弹窗 */
		showPickerColorPopFore() {
			this.showPickerColorFore = true;
		},
		/* 显示获取颜色选择弹窗 */
		showPickerColorPopPd() {
			this.showPickerColorPd = true;
		},
		/* 获取颜色选择回调 */
		getPickerColorBack(color) {
			/* 隐藏弹窗 */
			this.showPickerColorBack = false;
			/* 判断颜色值是否有效 */
			if (color) {
				this.background = color;
			}
		},
		/* 获取颜色选择回调 */
		getPickerColorFore(color) {
			/* 隐藏弹窗 */
			this.showPickerColorFore = false;
			/* 判断颜色值是否有效 */
			if (color) {
				this.foreground = color;
			}
		},
		/* 获取颜色选择回调 */
		getPickerColorPd(color) {
			/* 隐藏弹窗 */
			this.showPickerColorPd = false;
			/* 判断颜色值是否有效 */
			if (color) {
				this.pdground = color;
			}
		},
		handleInputChange(){
			this.creatQrcode();
		}
		
	},
	components: {
		tkiQrcode
	},
	onLoad: function () {}
};
</script>

<style lang="stylus">
/* @import "../../../common/icon.css"; */
.container
	margin-top:30rpx
	display: flex;
	flex-direction: column;
	width: 100%;
	.qrimg
		display: flex;
		justify-content: center;
		.qrimg-i
			margin-right: 10px;
	.uni-list
		.uni-input
			height: 80rpx
			width: 700rpx
			margin-top: 20rpx
			margin-left:20rpx
			border: 2px solid #0052d9
			border-radius: 5px;
			color: #333;
			input
				width: 100%;
				margin-bottom: 20upx;
	.body-view
		color: #0052d9
		slider
			width: 100%;
	
	.picker
		display: flex
		.button-picker
			border: 1rpx solid #eeeeee
			margin-top: 20rpx
			width: 200rpx;
			margin-top: 10rpx;
			margin-left: 40rpx
			height: 80rpx
		.picker-title
			justify-content: center
			margin-left: 90rpx
			color: #0052d9
			font-weight: bold
			
	.uni-padding-wrap
		.button-color
			background-color: #0052d9
			color: #fff
			margin-top: 20rpx
			width: 400rpx;
			margin-top: 10rpx;
		.uni-title
			margin-left: 20rpx
			margin-top: 30rpx
			color: #0052d9
			font-weight: bold
		.btns
			margin-top: 40rpx
			display: flex;
			flex-direction: column;
			width: 100%;
			button
				margin-top: 20rpx
				width: 400rpx;
				margin-top: 10upx;
			.button-color
				background-color: #0052d9
				color: #fff
</style>
